<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="security"
	uri="http://www.springframework.org/security/tags"%>
<script type="text/javascript">
	$(document).ready(function() {
		$("#mytable").dataTable();
	});
	
	function viewProfile(accNumber, loginId) {
		$.ajax({
			type : "POST",
			url : "adminViewProfile",
			data : {
				"account" : accNumber
			},
			dataType: "json",
			success: function(customer){
				$("#loginId").html(loginId);
				$("#cardNumberId").html(customer.cardNumberId);
				$("#firstName").html(customer.firstName);
				$("#lastName").html(customer.lastName);
				$("#midName").html(customer.midName);
				$("#email1").html(customer.email1);
				$("#email2").html(customer.email2);
				$("#address1").html(customer.address1);
				$("#address2").html(customer.address2);
				$("#mobileNumber").html(customer.mobileNumber);
				$("#homeNumber").html(customer.homeNumber);
			},
			error: function(){
				alert("Request failed!");
			}
		});
	}
</script>
<div id="content-outer">
	<!-- start content -->
	<div id="content">

		<!--  start page-heading -->
		<div id="page-heading">
			<h1>User Account List</h1>
		</div>
		<table id="mytable">
			<thead>
				<tr>
					<th>Account Number</th>
					<th>Account Type</th>
					<th>Balance</th>
					<security:authorize access="hasRole('ROLE_ADMIN')">
						<th>User Login Id</th>
					</security:authorize>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="account" items="${accountList}">
					<tr>
						<td>${account.accountNumber}</td>
						<td>${account.type}</td>
						<td>${account.balance}</td>
						<security:authorize access="hasRole('ROLE_ADMIN')">
							<td><input type="button" data-toggle="modal" data-target="#myModal"
									value="${account.getUser().getLoginId() }" class="btn btn-primary"
							onclick="viewProfile('${account.accountNumber}', '${account.getUser().getLoginId() }');"/>
							</td>
						</security:authorize>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<br />
	</div>
	<div class="clear">&nbsp;</div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Change information</h4>
			</div>
			<div class="modal-body">
					<table border="0" width="100%" cellpadding="0" cellspacing="0"
			id="content-table">
			<tr>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowleft.jpg" width="20" height="300"
					alt="" /></th>
				<th class="topleft"></th>
				<td id="tbl-border-top">&nbsp;</td>
				<th class="topright"></th>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowright.jpg" width="20" height="300"
					alt="" /></th>
			</tr>
			<tr>
				<td id="tbl-border-left"></td>
				<td>
					<div id="content-table-inner">
						<div id="content-table-inner" style="padding-left: 35px;">
							<table border="0" width="100%" cellpadding="0" cellspacing="0">
								<tr valign="top">
									<td>
										<table border="0" cellpadding="0" cellspacing="0" id="id-form">
											<tr>
												<th valign="top">Customer Login Id:</th>
												<td id="loginId" style="padding-left: 10px"></td>
											</tr>
											<tr>
												<th valign="top">Customer Card Number Id:</th>
												<td id="cardNumberId" style="padding-left: 10px"></td>
											</tr>
											<tr>
												<th valign="top">First Name:</th>
												<td id="firstName" style="padding-left: 10px"></td>
											</tr>
											<tr>
												<th valign="top">Last Name:</th>
												<td id="lastName" style="padding-left: 10px"></td>
											</tr>
											<tr>
												<th valign="top">Middle Name:</th>
												<td id="midName" style="padding-left: 10px"></td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Email 1:</th>
												<td id="email1" style="padding-left: 10px"></td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Email 2:</th>
												<td id="email2" style="padding-left: 10px"></td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Address1:</th>
												<td id="address1" style="padding-left: 10px"></td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Address2:</th>
												<td id="address2" style="padding-left: 10px"></td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Mobile Number:</th>
												<td id="mobileNumber" style="padding-left: 10px"></td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Home Number:</th>
												<td id="homeNumber" style="padding-left: 10px"></td>
												<td></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</td>
				<td id="tbl-border-right"></td>
			</tr>
			<tr>
				<th class="sized bottomleft"></th>
				<td id="tbl-border-bottom">&nbsp;</td>
				<th class="sized bottomright"></th>
			</tr>
		</table>
			</div>
		</div>
	</div>
</div>
<div id="123"></div>